<template>
  <view class="phxx-item" @click="goToDetail(itemList)">
    <view class="phxx-item-content">
      <view class="top">
        <view class="cname-box">
          <view class="cname">{{ itemList.planNo || ''}}
            <uni-icons class="icon-calendar-1" type="minus" color="red" size="15"
              style="padding: 3px;font-weight: bold;" v-if="itemList.planConfig == 1"></uni-icons>
          </view>
          <view class="cname-fu">{{ itemList.purchaserName || ''}}</view>
        </view>

        <view :class="{'gray-type': itemList.jyStatus == 2,'orange-type': itemList.jyStatus == 1,'blue-type': itemList.jyStatus == 3,
									 'green-type': itemList.jyStatus == 4,'red-type': itemList.jyStatus == 0,'status': true}">{{
          transStatusObj[itemList.jyStatus] }}</view>
      </view>
      <view class="body-box" style="position: relative;">
        <view class="bottom">
          <view class="items">
            <text class="til-icon mz1">装</text>
            <text class="val fwb">{{ itemList.loadingSiteName || ''}}</text>
          </view>
        </view>
        <view class="line-box">
          <view class="line"></view>
        </view>
        <view class="bottom" style="margin-bottom: 20rpx;">
          <view class="items">
            <text class="til-icon mz2">卸</text>
            <text class="val fwb">{{ itemList.landingPlace|| '' }}</text>
          </view>
        </view>
        <view class="bottom" v-if="showErpFlag">
          <view class="items">
            <text class="til">ERP订单编号:</text>
            <text class="val">{{ itemList.billNo || ''}}</text>
          </view>
        </view>
        <view class="bottom" v-if="showErpFlag">
          <view class="items">
            <text class="til">ERP订单名称:</text>
            <text class="val">{{ itemList.billName || ''}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">煤种:</text>
            <text class="val">{{ itemList.proName || ''}}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">手机号:</text>
            <text class="val">{{ itemList.purchaserPhone || ''}}</text>
          </view>
        </view>
        <!-- <view class="bottom">
          <view class="items">
            <text class="til">装货地:</text>
            <text class="val">{{ itemList.loadingSiteName || '' }}</text>
          </view>
        </view>
        <view class="bottom">
          <view class="items">
            <text class="til">卸货地:</text>
            <text class="val">{{ itemList.landingPlace || '' }}</text>
          </view>
        </view> -->
        <view class="bottom">
          <view class="items">
            <text class="til">卸货点:</text>
            <text class="val">{{ itemList.landingPointName || '' }}</text>
          </view>
        </view>
        <view class="icon-box" style="position:relative;margin-bottom:10px;width: 100%;height: 1px;">
          <image class="cover-img" :src="imagesPath" @click.stop="handleClick(itemList)" mode="aspectFill"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import config from '@/config'
  import { getDictList } from '@/api/login';
  import { toast, dictTansParams } from '@/utils/common';
  import { getGoodsSourceByPlanId, getEnterBasic } from '@/api/tranplan.js';
  export default {
    name: 'row-number',
    props: {
      transStatusObj: {
        type: Object,
        default: {}
      },
      itemList: {
        type: Object,
        default: {
          vehicleNo: '',
          driverName: '',
          queueStatusName: '',
          customerName: '',
          coalSubtypeName: '',
          loadingSiteName: '',
          queueTime: '',
          callNumberTime: ''
        }
      },
      authriotyFlagVoilation: {
        type: Boolean,
        default: false
      },
      showErpFlag: {
        type: Boolean,
        default: false
      },
      authriotyFlagBlck: {
        type: Boolean,
        default: false
      },
      authriotyFlagupd: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        transStatusLists: [],
      }
    },
    computed: {
      imagesPath() {
        if (this.$store.state.user.curTypeColor == "#D22C2C") {
          return config.baseImgUrl + '/code1.png'
        } else if (this.$store.state.user.curTypeColor == "#409EFE") {
          return config.baseImgUrl + '/code.png'
        } else {
          return config.baseImgUrl + '/code.png'
        }
      }
    },
    methods: {
      clickImg() {
        let _ = this;
        uni.previewImage({
          urls: [_.imagesPath]
        });
      },
      handleClick(item) {
        this.$emit('showCode', item);
      },
      goToDetail(item) {
        wx.navigateTo({ url: '/pages/lineup/index?waybillNo=' + item.waybillNo })
      },
      callParentBtns(item, type) {
        this.$emit('manualCalling', item, type);
      },
      async linkToSourceForm(data) {
        if (data.viewGoodsSourceBtn === 1) {
          const res = await getGoodsSourceByPlanId({ planId: data.id })
          if (res.code !== 0) {
            toast(res.msg)
            return;
          }
        }
        this.$tab.navigateTo(`/packageB/pages/sourceForm/index?id=${data.id}&planNo=${data.planNo}&bizType=1&purchaserId=${data.purchaserId}&viewGoodsSourceBtn=${data.viewGoodsSourceBtn}&findCarOnPlatformBtn=${data.findCarOnPlatformBtn}`);
      },
    }
  };
</script>

<style lang="scss" scoped>
  .footer-btn {
    padding-top: 20rpx;
    border-top: 2rpx solid #F1F2F5;
  }

  .cover-img {
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .top {
    border-bottom: 1rpx solid transparent !important;
  }

  .phxx-item {
    background: #fff !important;

    .phxx-item-content {
      .cname-box {
        font-size: 23.11rpx;

        .cname {
          color: #333;
          font-size: 23.11rpx;
          font-weight: normal;
        }

        .cname-fu {
          color: #999;
        }
      }

      .fwb {
        font-weight: bold;
      }
    }
  }

  .body-box {
    background: linear-gradient(180deg, rgba(232, 243, 255, 1), rgba(255, 255, 255, 1) 100%) !important;
    padding: 20rpx;

    .items {
      font-size: 24.88rpx;

      .til-icon {
        width: 40rpx;
        height: 40rpx;
        line-height: 40rpx;
        display: block;
        border-radius: 10rpx;
        text-align: center;
        color: #fff;
        display: inline-block;
      }

      .mz1 {
        background: #409EFE;
      }

      .mz2 {
        background: #F78600;
      }

      .val.fwb {
        font-size: 28.44rpx;
        top: 5rpx;
        position: relative;
        color: #000 !important;
      }

      .val {
        color: #333;
      }

      .til {
        color: #666;
        width: auto !important;
      }
    }
  }
</style>